<template>
    <FormBox ref="search" class="form-inline form_box">
        <div v-if="isSearch" class="search flex-row flex-item">
            <slot name="form" />
            <a-space v-if="isControl">
                <a-button class="form_btn" size="middle" type="primary" @click="searchBtn"><search-outlined />搜索</a-button>
                <a-button class="form_btn" @click="resetBtn"><redo-outlined />重置</a-button>
            </a-space>
            <slot name="control" />
        </div>
        <div class="extra flex" v-if="isExtra">
            <slot name="extra" />
        </div>
    </FormBox>
</template>
<script setup lang="ts">
import { SearchOutlined, RedoOutlined } from '@ant-design/icons-vue';
defineProps({
    isSearch: {
        type: Boolean,
        default: true
    },
    isControl: {
        type: Boolean,
        default: true
    },
    isExtra: {
        type: Boolean,
        default: true
    }
})
let emit = defineEmits(['search', 'reset']);
//搜索
const searchBtn = () => {
    emit('search');
}
//重置
const resetBtn = () => {
    emit('reset');
}
</script>
<style lang="scss" scoped>
$space: 16px;

.search {
    flex-wrap: wrap;
}

.form_box {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap;

    // flex-direction: column;
    .flex_item {
        flex: 1;
        -webkit-flex: 1;
    }
}

.form-inline {
    // margin-bottom: $space;
    // padding: $space $space 0;
    box-sizing: border-box;
    background: #fff;

    // border: 1px solid #ebeef5;
    .form_btn {
        margin-bottom: $space;
    }
}

.extra {
    flex-shrink: 0;
    margin-bottom: $space;
    // align-items: center;
}

:deep(.ant-form-item-control) {
    line-height: 1 !important;
}</style>
